import React, { useState } from 'react';
import { Box, Datepicker, MainButton, Text } from '@nova-hf/ui';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { useTranslation } from 'utils/i18n';

type FiberTerminationProps = {
  color: MainColorType;
  installationDate: Date;
  onComplete: (date: Date) => void;
};

export const FiberTerminationStep = ({
  color,
  installationDate,
  onComplete,
}: FiberTerminationProps) => {
  const [selectedDate, setSelectedDate] = useState<Date>(
    new Date(installationDate.setDate(installationDate.getDate() + 1)),
  );
  const { t } = useTranslation('flutningur');

  const onSelectDate = (date: Date) => {
    setSelectedDate(date);
  };

  return (
    <>
      <Box width={{ sm: '100%', xl: '8/12' }}>
        <Text variant="subtitleBold">{t('flutningur.new.termination.title')}</Text>
        <Text>{t('flutningur.new.termination.subtitle')}</Text>
      </Box>
      <Datepicker
        color={color}
        onSelect={onSelectDate}
        selected={selectedDate}
        value={selectedDate}
        inputId={'activationDate'}
        inputName={'activationDate'}
        dateFormat="d. MMMM"
        minDate={new Date()}
        maxDate={new Date(installationDate.setDate(installationDate.getDate() + 5))}
      />
      <MainButton onClick={() => onComplete(selectedDate)} text="Staðfesta" />
    </>
  );
};